<script setup lang='ts'>
import type { VxeGridProps, VxePagerEvents } from 'vxe-table'
import { SearchTable } from '@fl/components'
import { cloneDeep } from 'lodash-es'
import { reactive } from 'vue'
import { useDailyStatisticIndex, useExportDailyStatistics } from '@fl/api/anjutong/coupon-statistics'

defineOptions({
    // eslint-disable-next-line vue/component-definition-name-casing
    name: 'data-analysis-daily-statistics-index',
})

const tableRef = ref()

// 分页参数
const tablePage = ref({
    currentPage: 1,
    pageSize: 10,
    total: 0,
})
const initialPage = toRaw({ ...tablePage.value })

// 查询列表 coupontype 1优惠券，2折扣券
const params = computed(() => ({
    pageNum: tablePage.value.currentPage,
    pageSize: tablePage.value.pageSize,
}))
const { data, isLoading } = useDailyStatisticIndex(params)

// 导出
const { isPending, mutateAsync } = useExportDailyStatistics()

async function exportData() {
    const res = await mutateAsync()
    if (res) {
        const objectUrl = URL.createObjectURL(res)
        location.href = objectUrl
        URL.revokeObjectURL(objectUrl)
    }
}

const records = ref()
watchEffect(() => {
    if (data.value) {
        records.value = cloneDeep(data.value.records)
        tablePage.value.total = data.value.total!
    }
})

const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.value.currentPage = currentPage
    tablePage.value.pageSize = pageSize
}

const gridOptions = reactive<VxeGridProps>({
    columns: [
        { title: '序号', type: 'seq', width: 60 },
        { field: 'receiveDate', title: '领取日期' },
        { field: 'totalReceivePeople', title: '总领取人数' },
        { field: 'totalReceiveQuantity', title: '总领取张数' },
        
    ],
})
</script>

<template>
    <ElCard shadow="never">
        <SearchTable ref="tableRef" v-bind="gridOptions" v-model:pager="tablePage" :loading="isLoading" :data="records" height="600"
            @page-change="handlePageChange">
            <template #toolbar_buttons>
                <ElButton type="primary" @click="exportData" :loading="isPending">
                    导出
                </ElButton>
            </template>
        </SearchTable>
    </ElCard>
</template>
